<template>
  <div class='randoms-container'>
    <el-card class="box-card">
      <!-- 头部 -->
      <el-form
        label-width="70px"
        class="search-from"
      >
        <el-form-item label="关键字">
          <el-input
            placeholder="根据编号搜索"
            class="search"
            size="small"
            v-model="page.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            @click="page.keyword = ''"
          >清除</el-button>
          <el-button
            size="small"
            type="primary"
            @click="getRandomsList()"
          >搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        :title="`数据一共${page.counts}条`"
        type="info"
        show-icon
        style="margin-bottom:15px"
      >
      </el-alert>

      <!-- 表格 -->
      <el-table
        :data="randomsList"
        ref="table"
      >
        <el-table-column
          prop="id"
          label="编号"
          width="210px"
        >
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="80px"
          :formatter='fromatQuestionType'
        >
        </el-table-column>
        <el-table-column
          label="题目编号"
          width="210px"
        >
          <template slot-scope="scope">
            <el-row
              href=""
              v-for="(item,index) in scope.row.questionIDs"
              :key="index"
            >
              <el-link
                type="primary"
                @click="questionPreview(item.id)"
              >{{item.number}}</el-link>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="180px"
        >
        </el-table-column>
        <el-table-column
          label="答题时间(s)"
          prop="totalSeconds"
        >
        </el-table-column>
        <el-table-column
          label="正确率(%)"
          prop="accuracyRate"
        >
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="userName"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              circle
              @click="delRandom(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页工具 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5,10, 15, 20, 50]"
          :page-size="page.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.counts"
        >
        </el-pagination>
      </div>

      <!-- 题型预览弹层 -->
      <el-dialog
        title="题型预览"
        :visible.sync="dialogTableVisible"
        width="900px"
        v-if="dialogTableVisible"
        @close='close'
      >
        <el-row type='flex'>
          <el-col>【题型】：{{currentQsInfo.questionType | fromatQsType}}</el-col>
          <el-col>【编号】：{{currentQsInfo.id}}</el-col>
          <el-col>【难度】：{{currentQsInfo.difficulty | fromatQsDifficulty}}
          </el-col>
          <el-col>【标签】：{{currentQsInfo.tags}}</el-col>
        </el-row>
        <el-row type='flex'>
          <el-col>【学科】：{{subjectInfo.subjectName}}</el-col>
          <el-col>【目录】：{{directoryName}}</el-col>
          <el-col>【方向】：{{currentQsInfo.direction}}</el-col>
          <el-col></el-col>
        </el-row>

        <hr>
        <span>【题干】:</span>
        <div
          v-html="currentQsInfo.question"
          :style="{color: currentQsInfo.questionType!== '3' ? '#606266' : '#0000FF'}"
        ></div>
        <!-- 选择题选项 -->
        <div
          class="choice-question"
          v-if="currentQsInfo.questionType!== '3'"
        >
          <p>{{currentQsInfo.questionType | fromatQsType}}
            选项：(以下选中的选项为正确答案)</p>
          <el-checkbox-group :value="currentQsInfo.options">
            <el-row
              v-for="item in currentQsInfo.options"
              :key="item.id"
              v-show="item.title"
            >
              <el-checkbox
                v-if="item.title"
                :label="item.title"
                :checked='item.isRight===1'
              ></el-checkbox>
            </el-row>
          </el-checkbox-group>
        </div>

        <hr>
        <div>
          【参考答案】：
          <el-button
            type="danger"
            size="small"
            @click="videoShow=!videoShow"
          >视频答案解析</el-button>
          <div v-if="videoShow">
            <video
              :src="currentQsInfo.videoURL"
              controls
              width="400px"
              height="300px"
            ></video>
          </div>
        </div>
        <hr>
        <div class="answer">【答案解释】：<span v-html="currentQsInfo.answer"></span>
        </div>
        <hr>
        <span>【题目备注】：{{currentQsInfo.remarks}}</span>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="dialogTableVisible = false"
          >关闭</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { detail as subDetail } from '@/api/hmmm/subjects'
import { detail as dirDetail } from '@/api/hmmm/directorys'
// 引入题型筛选
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'Randoms',

  data () {
    return {
      page: {
        page: 1,
        pagesize: 10,
        keyword: '',
        counts: 0
      },
      randomsList: [],
      dialogTableVisible: false, // 弹层显示
      currentQsInfo: [], // 当前试题信息
      subjectInfo: [],
      videoShow: false,
      directoryName: '' // 目录名称
    }
  },
  filters: {
    fromatQsType (cellValue) {
      questionType.forEach(item => {
        if (item.value === Number(cellValue)) {
          cellValue = item.label
        }
      })
      return cellValue
    },
    fromatQsDifficulty (cellValue) {
      difficulty.forEach(item => {
        if (item.value === Number(cellValue)) {
          cellValue = item.label
        }
      })
      return cellValue
    }
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    // 获取题组列表
    async getRandomsList () {
      try {
        const { data } = await randoms(this.page)
        this.page.counts = data.counts
        this.randomsList = data.items
      } catch (error) {
        console.log(error)
      }
    },
    // 页码发生改变触发事件
    handleCurrentChange (page) {
      this.page.page = page
      this.getRandomsList()
      this.scollToTable()
    },
    // pagesize发生改变触发事件
    handleSizeChange (pagesize) {
      this.page.pagesize = pagesize
      this.getRandomsList()
    },
    delRandom (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id: id })
        if (this.randomsList.length === 1 && this.page.page > 1) {
          this.page.page--
          this.getRandomsList()
        } else {
          this.getRandomsList()
        }
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 页面滚动到table页
    scollToTable () {
      const tableTop = this.$refs.table.$el.offsetTop
      window.scrollTo(0, tableTop)
    },
    // 格式化题型
    fromatQuestionType (row, column, cellValue, index) {
      questionType.forEach(item => {
        if (item.value === Number(cellValue)) {
          cellValue = item.label
        }
      })
      return cellValue
    },
    // 题型预览
    async questionPreview (id) {
      try {
        const { data } = await detail({ id })
        this.currentQsInfo = data
        this.fromatQsSubject(data.subjectID, data.catalogID)
        this.dialogTableVisible = true
      } catch (error) {
        console.log(error)
      }
    },
    // 获取学科
    // 获取目录
    async fromatQsSubject (id, dirId) {
      const { data } = await subDetail({ id })
      this.subjectInfo = data
      const res = await dirDetail({ id: dirId })
      this.directoryName = res.data.directoryName
    },

    // 关闭弹层触发事件
    close () {
      // 关闭视频显示
      this.videoShow = false
    }

  }
}
</script>

<style scoped lang='scss'>
.randoms-container {
  margin: 10px;
  .box-card {
    padding: 5px 10px;
    .search-from {
      display: flex;
      justify-content: space-between;
      .search {
        width: 200px;
      }
    }

    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}

.el-col {
  padding: 10px 0;
}
hr {
  margin: 7px 0;
}
.choice-question {
  .el-row {
    padding: 8px 0;
  }
}
.answer {
  display: flex;
  align-items: center;
}
</style>
